﻿<script src="~/lib/vue/dist/vue.global.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<div id="app">
	<table width="100%">
		<tr>
			<td>
				<p color="black">您正在做的业务是:人力资源--权限管理--添加用户</p>
			</td>
		</tr>
		<tr>
            <td align="right">
                <input type="button" value="新 增" v-on:click="Add()" class="BUTTON_STYLE1">
                <input type="button" value="返回" class="BUTTON_STYLE1" v-on:click="goBack()">
            </td>
		</tr>
	</table>
	<table width="100%" border="1" cellpadding=0 cellspacing=1
		   bordercolorlight=#848284 bordercolordark=#eeeeee
		   class="TABLE_STYLE1">
		<tr>
			<td width="10%" class="TD_STYLE1">
				用户名称
			</td>
			<td width="40%" class="TD_STYLE2">
				<el-input style="width: 240px" v-model="ur.uName" />
			</td>
			<td width="10%" class="TD_STYLE1">
				用户密码
			</td>
			<td class="TD_STYLE2">
				<el-input style="width: 240px" v-model="ur.uPassWord" />
			</td>
		</tr>
		<tr>
			<td class="TD_STYLE1">
				真实姓名
			</td>
			<td class="TD_STYLE2">
				<el-input style="width: 240px" v-model="ur.uTrueName" />
			</td>
			<td class="TD_STYLE1">
				用户身份
			</td>
			<td class="TD_STYLE2">
				<el-select v-model="ur.rolesName"
						   placeholder="请选择"
						   size="large"
						   class="aaa"
						   style="width: 240px">
					<el-option v-for="item in options"
							   :key="item.value"
							   :label="item.rolesName"
							   :value="item.rolesID" />
				</el-select>
			</td>
		</tr>
	</table>
</div>
<script>
	const { createApp, ref, reactive, computed, watchEffect } = Vue;
	var app = createApp({
		setup() {
			let max=ref()
			let ur = reactive({
				uName: '',
				uTrueName: '',
				uPassWord: '',
				rolesName:''
			})
			const options=ref()
			axios.get('/RolesGet')
				.then(res => {
					options.value = res.data
				})
			axios.get('/MaxUid')
				.then(res => {
					max.value = res.data+1
				})
			
			function Add() {
				console.info(max.value)
				console.info(ur.rolesName)
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/User/AddUser', {
					uName:ur.uName,
					uTrueName:ur.uTrueName,
					uPassWord:ur.uPassWord
				}).then(res => {
					
				})
				axios.post('/UserRolesAdd', {
					userID: max.value,
					rolesID: ur.rolesName
				}).then(res => {
					alert("新增成功");
					window.location.href = `/User/Index`;
				})
			}
            //返回
            function goBack() {
                history.back();
            }
			return {
				ur,
				Add,
				options,
				max,
                goBack
			}
		}
	})
	app.use(ElementPlus);
	app.mount("#app");
</script>
<style type="text/css">
	.TABLE_STYLE1 {
		border: 1px solid;
		border-color: #000000;
		border-collapse: collapse;
		width: 100%;
	}

	.TD_STYLE1 {
		background-color: #FFDB6F;
	}

	.TD_STYLE2 {
		border-spacing: 1px;
		background-color: #FFFFBB;
		border-color: #DEDBD6;
		border: 0;
	}

	BODY {
		background-color: #FFFFBB;
		border: 1px solid #FFDB6F;
		display: block;
		margin: 8px;
	}

	#tt {
		margin-top: 5%;
	}
</style>
